<%@ page language="java" pageEncoding="utf-8"%>
<header class="navbar navbar-inverse" role="banner">
    <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" id="menu-toggler">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html"><img src="/assets/img/logo.png" alt="logo" /></a>
    </div>
    <ul class="nav navbar-nav pull-right hidden-xs">
        <li class="hidden-xs hidden-sm">
            <input class="search" type="text" />
        </li>
        <li class="notification-dropdown hidden-xs hidden-sm">
            <a href="#" class="trigger">
                <i class="icon-warning-sign"></i>
                <span class="count">8</span>
            </a>
            <div class="pop-dialog">
                <div class="pointer right">
                    <div class="arrow"></div>
                    <div class="arrow_border"></div>
                </div>
                <div class="body">
                    <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                    <div class="notifications">
                        <h3>You have 6 new notifications</h3>
                        <a href="#" class="item">
                            <i class="icon-signin"></i> New user registration
                            <span class="time"><i class="icon-time"></i> 13 min.</span>
                        </a>
                        <a href="#" class="item">
                            <i class="icon-signin"></i> New user registration
                            <span class="time"><i class="icon-time"></i> 18 min.</span>
                        </a>
                        <a href="#" class="item">
                            <i class="icon-envelope-alt"></i> New message from Alejandra
                            <span class="time"><i class="icon-time"></i> 28 min.</span>
                        </a>
                        <a href="#" class="item">
                            <i class="icon-signin"></i> New user registration
                            <span class="time"><i class="icon-time"></i> 49 min.</span>
                        </a>
                        <a href="#" class="item">
                            <i class="icon-download-alt"></i> New order placed
                            <span class="time"><i class="icon-time"></i> 1 day.</span>
                        </a>
                        <div class="footer">
                            <a href="#" class="logout">View all notifications</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="notification-dropdown hidden-xs hidden-sm">
            <a href="#" class="trigger">
                <i class="icon-envelope"></i>
            </a>
            <div class="pop-dialog">
                <div class="pointer right">
                    <div class="arrow"></div>
                    <div class="arrow_border"></div>
                </div>
                <div class="body">
                    <a href="#" class="close-icon"><i class="icon-remove-sign"></i></a>
                    <div class="messages">
                        <a href="#" class="item">
                            <img src="/assets/img/contact-img.png" class="display" alt="user" />
                            <div class="name">Alejandra Galván</div>
                            <div class="msg">
                                There are many variations of available, but the majority have suffered alterations.
                            </div>
                            <span class="time"><i class="icon-time"></i> 13 min.</span>
                        </a>
                        <a href="#" class="item">
                            <img src="/assets/img/contact-img2.png" class="display" alt="user" />
                            <div class="name">Alejandra Galván</div>
                            <div class="msg">
                                There are many variations of available, have suffered alterations.
                            </div>
                            <span class="time"><i class="icon-time"></i> 26 min.</span>
                        </a>
                        <a href="#" class="item last">
                            <img src="/assets/img/contact-img.png" class="display" alt="user" />
                            <div class="name">Alejandra Galván</div>
                            <div class="msg">
                                There are many variations of available, but the majority have suffered alterations.
                            </div>
                            <span class="time"><i class="icon-time"></i> 48 min.</span>
                        </a>
                        <div class="footer">
                            <a href="#" class="logout">View all messages</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown">
                Your account
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="personal-info.html">Personal info</a></li>
                <li><a href="#">Account settings</a></li>
                <li><a href="#">Billing</a></li>
                <li><a href="#">Export your data</a></li>
                <li><a href="#">Send feedback</a></li>
            </ul>
        </li>
        <li class="settings hidden-xs hidden-sm">
            <a href="personal-info.html" role="button">
                <i class="icon-cog"></i>
            </a>
        </li>
        <li class="settings hidden-xs hidden-sm">
            <a href="signin.html" role="button">
                <i class="icon-share-alt"></i>
            </a>
        </li>
    </ul>
</header>